<template>
	<view class="container">
		<swiper class="swiper" v-if="classification.imgList.length!=0" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in classification.imgList" :key="item">
				<image :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="nav">
			<view class="nav_filter">
				<view :class="classification.orderType==1?'active':''" @tap="classification.change(1)">综合</view>
				<view :class="classification.orderType==2?'active':''" @tap="classification.change(2)">新品</view>
				<view :class="classification.orderType==3?'active':''" @tap="classification.change(3)">销量</view>
			</view>
			<view class="change">
				<view><image @tap="classification.changeisLine(true)" :src="url+ (classification.isLine?'icon-175.png':'icon-176.png')" mode=""></image></view>
				<view><image @tap="classification.changeisLine(false)" :src="url+ (classification.isLine?'icon-178.png':'icon-177.png')" mode=""></image></view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="recommend" @scrolltolower="classification.lower">
			<shopList :isLine="classification.isLine" :list="classification.list"></shopList>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
import { reactive ,ref} from 'vue';
import api from '@/api'
import {onLoad,onShareAppMessage} from '@dcloudio/uni-app'
const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
onLoad( async(e)=>{
	classification.groupId = e.groupId?e.groupId:''
	uni.showLoading({
		mask: true,
		title: "加载中"
	})
	await classification.getDetais()
	await classification.getList()
})

//分类数据
const classification = reactive<any>({
	isLine:true,//行列
	imgList:[],//图片列表
	brandId:'',//品牌id
	list:[],//列表数据
	groupId:'',//分类id
	orderType:1,//排序  1、综合 2、新品 3、销量
	page:1,
	nextPage:true,
	getDetais: async()=>{
		const res: any = await api({
			method: 'get',
			url: `/mall/shopping/goods/goods-group/brandsGroupInfo/${classification.groupId}`,
		})
		classification.brands = res.data.brandsId
		uni.setNavigationBarTitle({
			title:res.data.name
		})
		if(res.data.advertisingMap){
			classification.imgList = res.data.advertisingMap.split(',')
		}
		
	},
	getList: async()=>{
		const res: any = await api({
			method: 'get',
			url: `/mall/shopping/goods/search/goodsList`,
			data:{
				brandId:classification.brands,
				groupId:classification.groupId,
				orderType:classification.orderType,
				page:classification.page,
				limit:20,
			}
		})
		classification.list = classification.page==1?res.data.goods.records:classification.list.concat(res.data.goods.records)
		classification.nextPage = classification.list>=res.data.total?false:true
		uni.hideLoading()
	},
	change: async(index:number)=>{
		classification.orderType = index
		classification.page = 1
		uni.showLoading({
			mask: true,
			title: "加载中"
		})
		await classification.getList()
	},
	changeisLine:(flay)=>{
		classification.isLine = flay
	},
	lower:()=>{//滚动到底
	    if(!classification.nextPage) return
		classification.page++
		uni.showLoading({
			mask: true,
			title: "加载中"
		})
		classification.getList()
	}
})


</script>

<style lang="scss" scoped>
.container{
	line-height: 1;
	padding-bottom: 40rpx;
}
.swiper{
	width: 100%;
	height: 300rpx;
	image{
		width: 100%;
		height: 300rpx;
	}
}
.nav{
	width: 100%;
	color: #1B2120;
	font-size: 26rpx;
	padding: 24rpx 40rpx;
	font-weight: bold;
	background-color: #FFF;
	box-sizing: border-box;
	position: sticky;top: 0;z-index: 99;
	@include flex(center,space-between);
	.change{
		@include flex(center);
		view{
			width: 48rpx;
			height: 48rpx;
			@include flex(center,center);
			border: 2rpx solid #CACCCC;
			border-radius: 12rpx 0 0 12rpx;
			&:last-child{
				border-left: none;
				border-radius: 0 12rpx 12rpx 0;
			}
		}
		image{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.nav_filter{
		font-weight: bold;
		font-size: 26rpx;
		color: #1B2120;
		width: calc(100% - 192rpx);
		@include flex(center,space-between);
		.active{
			color: #FF6084;
		}
	}
}
.main{
	background-color: #F9F6F6;
}
.recommend{
	width: 100%;
	padding: 32rpx;
	box-sizing: border-box;
	background-color: #F9F6F6;
	height: calc(100% - 300rpx - 92rpx);
}
</style>
